<template>
	<view class="container">
		<view class="status_bar">
			
			<uni-nav-bar height="80rpx" statusBar="true" :border="false" backgroundColor="#2cbfac" color="white"
				title="音视频集中控制系统v2.0"></uni-nav-bar>
		</view>
		<!-- <view>
			<uni-notice-bar show-close single text="确认已连接101会议室WIFI后即可开始控制" />
		</view> -->
		<uni-card :border="true" title="">
			<uni-row>
				<uni-col :span="5">
					<uni-section title="" v-show="codes.length>0">
						<!-- <uni-list>
							<uni-list-item :border="true" v-for="code in codes" :key="code.id" :title="deviceName+'：'+code.codeName">
							</uni-list-item>
						</uni-list> -->
						<view class="grid-item-box" style="padding-left: 80rpx;">
							<text class="uni-h3"  style="line-height:80rpx;font-weight: 700;">{{deviceName}}</text>
						</view>
						<view  v-for="code in codes" :key="code.id" style="margin:80rpx 80rpx;">
							<uni-fav style="height:100rpx; width:220rpx" bgColor="#2cbfac" bgColorChecked="#208f80" fgColor="white" :circle="true" :checked="false" :content-text="{contentDefault:code.codeName,contentFav:code.codeName}" @click="favClick(code.id)" />
						</view>
						
					</uni-section>
				</uni-col>



				<uni-col :span="codes.length>0?15:22" :offset="1">
					<uni-section title="">
						<uni-row>
							<uni-col :span="5" :offset="1">
								<view class="grid-item-box" @click="sendAll(1)" >
									<image src="@/static/svg/全开.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
									<text class="uni-h5"  style="line-height:80rpx">全开</text>
								</view>
							</uni-col>
							<uni-col :span="5" :offset="1">
								<view class="grid-item-box" @click="sendAll(0)">
									<image src="@/static/svg/全关.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
									<text class="uni-h5"  style="line-height:80rpx">全关</text>
								</view>
							</uni-col>
							<uni-col :span="5" :offset="1">
								<view class="grid-item-box" @click="openPopup">
									<image src="@/static/svg/模式.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
									<text class="uni-h5"  style="line-height:80rpx">模式切换</text>
								</view>
							</uni-col>
							<view v-for="(deviceType,i) in deviceTypes" :key="deviceType.id">
								<uni-col v-for="(device,index) in deviceType.devices" :key="device.order" :span="5"
									:offset="1">
									<view class="grid-item-box" @click="getCodes(device.deviceType.id,device.deviceName,device.id)">
										<image :src="'/static/svg/'+deviceType.typeName+'.svg'" class="grid-image" style="box-shadow:20rpx 20rpx 20px #000000;">
										</image>
										<text class="uni-h5"  style="line-height:80rpx">{{device.deviceName}}</text>
									</view>
								</uni-col>
							</view>
						</uni-row>
						
					</uni-section>
				</uni-col>
				<!-- <uni-col :span="3" :offset="2">
					<view class="grid-item-box " style="padding-top: 250rpx; ">
						<clock bg="#2cbfac" color="#FFFFFF" style="box-shadow:20rpx 20rpx 20px #000000;border:10rpx solid #FFFFFF"></clock>
					</view>
				</uni-col> -->
			</uni-row>
		</uni-card>
		<uni-popup ref="popup" type="bottom">
			<view class="container">
				<uni-card :border="true" title="" style="background-color: white;">
					<uni-row>
						<uni-col :span="5" :offset="1">
							<view class="grid-item-box" @click="sendAll(1)">
								<image src="@/static/svg/模式.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
								<text class="uni-h5"  style="line-height:80rpx">模式1</text>
							</view>
						</uni-col>
						<uni-col :span="5" :offset="1">
							<view class="grid-item-box" @click="sendAll(1)">
								<image src="@/static/svg/模式.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
								<text class="uni-h5"  style="line-height:80rpx">模式2</text>
							</view>
						</uni-col>
						<uni-col :span="5" :offset="1">
							<view class="grid-item-box" @click="sendAll(1)">
								<image src="@/static/svg/模式.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
								<text class="uni-h5"  style="line-height:80rpx">模式3</text>
							</view>
						</uni-col>
						<uni-col :span="5" :offset="1">
							<view class="grid-item-box" @click="sendAll(1)">
								<image src="@/static/svg/模式.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
								<text class="uni-h5"  style="line-height:80rpx">模式4</text>
							</view>
						</uni-col>
						<uni-col :span="5" :offset="1">
							<view class="grid-item-box" @click="sendAll(1)">
								<image src="@/static/svg/模式.svg" class="grid-image"  style="box-shadow:20rpx 20rpx 20px #000000;"></image>
								<text class="uni-h5"  style="line-height:80rpx">模式5</text>
							</view>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Clock from 'vue-clock2';
	export default {
		components: {
			Clock
		},
		data() {
			return {
				positionId: 1,
				deviceTypes: [{
					id: 0,
					typeName: "空调",
					typeEnumId: 0,
					verifyEnumId: 0,
					verifyEnumId: 0,
					needTransHex: false,
					devices: [{
						id: 0,
						deviceName: '设备名1',
						positionId: 0
					}]
				}],
				codes: [],
				deviceName:"",
				sendToId:0
			}
		},
		methods: {
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
			},
			onTap(index, pagePath, text) {
				console.log("index:" + index + ",pagePath:" + pagePath + ",text:" + text);
			},
			async getDeviceTypes() {
				return new Promise((resolve, reject) => {
					this.get('/device-type/list-without-iot', null).then(res => {
						res.data.obj.forEach(async (x, index) => {
							await this.get('/device/list', {
								typeId: x.id,
								positionId: this.positionId
							}).then(resp => {
								x.devices = resp.data.obj;
								if (index == res.data.obj.length - 1) {
									this.deviceTypes = res.data.obj;
									resolve(res.data.obj);
								}
							})
						})
					}).catch(err => {
						reject(err);
					})
				})
			},
			sendCode(sendToId, codeId) {
				this.loading = true;
				this.post("/send-code/one", {
					sendToId,
					codeId
				}).then(res => {
					this.loading = false;
				}).catch(e => {
					this.loading = false;
				})
			},
			sendAll(toOpen) {
				this.loading = true;
				this.codes=[];
				this.deviceName="";
				this.deviceTypes.forEach(async (x, index) => {
					var sendToIds = [];
					x.devices.forEach(x => {
						sendToIds.push(x.id);
					});
					await this.post("/send-code/all", {
						toOpen,
						deviceTypeId: x.id,
						sendToIds: JSON.stringify(sendToIds)
					}).then(res => {
						if (index == this.deviceTypes.length) {
							this.loading = false;
						}
					}).catch(e => {
						this.loading = false;
						this.$refs.popup.close();
						return false;
					})
				})
				
			},
			getCodes(id,name,deviceId) {
				return new Promise((resolve, reject) => {
					this.get("/code/list", {
						deviceTypeId: id,
						codeTypeId: null,
						visible:true
					}).then(result => {
						this.codes=result.data.obj;
						this.deviceName=name;
						this.deviceId=deviceId;
					})
					console.log(this.codes);
				})
			},
			favClick(id){
				this.sendCode(this.deviceId,id);
			},
			openPopup(){
				this.$refs.popup.open('bottom');
			}
		},
		mounted() {
			// #ifdef APP-PLUS
			plus.screen.lockOrientation("landscape");
			// #endif
			this.getDeviceTypes();
		}
	}
</script>

<style>
	.image {
		width: 25px;
		height: 25px;
	}
	.container{
		max-height: 1350rpx;
		overflow-y: auto;
	}
	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>
